<template>
  <div class="container" >
        <div class="user-list">
            <div class="fixed">
                <search placeholder='请输入下级公司名称或员工名称' @toQuery="toQuery" @clearQuery="clearQuery"></search>
            </div>
            <ul class="list-content">
                <li class="item" v-for="(item, index) in userList" :key="index" @click="toBack(item)">
                    <div class="avater">
                        <img class="image" :src="avaterUrl" alt="">
                    </div>
                    <div class="content">
                        <h4 class="name">{{item.F_EmpName}}/{{item.F_EntryOrg}}</h4>
                        <p class="num">{{item.F_IDNum}}</p>
                    </div>
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
import search from '@/components/search'
import avaterUrl from 'static/image/avater.png'
import { setStorage } from 'common/utils/wechat'
import { employees } from 'api/api'
export default {
    data () {
        return {
            userInfo: {},
            accidentTime: '',
            region: [],
            avaterUrl,
            pageNum: 1,
            pageSize: 10,
            keyword: '',
            orgId: '',
            insuranceDate: '',
            userList: [],
            hasMore: true
        }
    },

    components: {
        search
    },

    methods: {
        toQuery (val) {
            if (!val) {
                return
            }
            this.keyword = val
            this.pageNum = 1
            wx.showLoading({
                title: '查询中'
            })
            this._employees('pull')
            wx.hideLoading()
        },
        clearQuery () {
            this.keyword = ''
            this._employees('pull')
        },
        bindRegionChange (e) {
            console.log(e.mp.detail.value)
            this.region = e.mp.detail.value
        },
        bindTimeChange (e) {
            console.log(e)
            this.accidentTime = e.mp.detail.value
        },
        toBack (item) {
            setStorage('chuxianren', item)
            wx.navigateBack({
                delta: 1
            })
        },
        _employees (type) {
            employees(this.pageSize, this.pageNum, this.keyword, this.orgId, this.insuranceDate, '-1')
                .then((res) => {
                    console.log(res)
                    if (type === 'pull') {
                        this.userList = res.data.rows
                    } else {
                        this.userList = this.userList.concat(res.data.rows)
                    }
                })
        }
    },
    computed: {
        currentRegion: function () {
            return this.region.join('-')
        }
    },
    async onReachBottom () {
        if (!this.hasMore) {
            return
        }
        this.pageNum += 1
        wx.showLoading({
            title: '加载中'
        })
        await this._employees()
        wx.hideLoading()
    },
    async onPullDownRefresh () {
        this.pageNum = 1
        wx.showLoading({
            title: '加载中'
        })
        await this._employees('pull')
        wx.stopPullDownRefresh()
        wx.hideLoading()
    },
    mounted () {
        console.log(this.$root.$mp)
    },
    onShow () {
        this._employees()
    }
}
</script>

<style lang='stylus' scoped>
.user-list
    width 750rpx
    .fixed
        position fixed
        top: 0
        width 100%
    .list-content
        padding-top 60px
        background #fff
        .item
            display flex
            padding 15rpx 0 0
            .avater
                width 90rpx
                height 90rpx
                margin 0 20rpx 0 40rpx
                .image
                    width 100%
                    height 100%
            .content
                flex 1
                border-bottom 1rpx solid #f5f5f5
                padding 18rpx 0 25rpx
                .name
                    font-size 30rpx
                    margin-bottom 6rpx
                .num
                    font-size 25rpx
                    color #73767a
</style>
